<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="excel-data-load">
    <div class="steps">
      <el-steps :active="active" style="width: 100%" align-center>
        <el-step title="选择数据模板" />
        <el-step title="导入数据" />
        <el-step title="导入完成" />
      </el-steps>
    </div>
    <div class="upload_list" v-show="active === 1">
      <ChooseTemplate ref="chooseTemplateRef" @handleEvent="handleEvent" />
    </div>
    <div class="upload_file" v-if="active === 2">
      <el-upload
        style="width: 390px;"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :file-list="fileList"
        drag
        :show-file-list="true"
        :auto-upload="false"
        :multiple="false"
        action="#"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖拽至此处或 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip" style="text-align:center;">
            支持上传xls/xlsx 文件。
          </div>
        </template>
      </el-upload>
    </div>
    <div class="finish" v-show="active === 3" v-loading="loading" element-loading-text="加载中...">
      <LoadFinish v-if="active === 3" :data="loadSuccessDataCount" />
    </div>
    <div class="option_btn">
      <el-button size="small" type="primary" v-show="active === 2" @click="step('pre')">上一步</el-button>
      <el-button size="small" type="primary" v-show="active === 1" @click="exportTemplate('next')">导出模板</el-button>
      <el-button size="small" type="primary" v-show="active === 1" @click="step('next')">下一步</el-button>
      <el-button size="small" type="primary" v-show="active === 2" @click="step('next')">确认导入</el-button>
      <el-button size="small" type="primary" v-show="active === 3" @click="finish">返回首页</el-button>
      <el-button size="small" v-show="active < 3" @click="cancel">返回</el-button>
    </div>
  </div>
</template>
<script  setup name="LoadTemplate">
import axios from 'axios';
import { getToken } from '@/utils/auth';
import ChooseTemplate from './ChooseTemplate.vue';
import Mapping from './Mapping.vue';
import LoadFinish from './LoadFinish.vue';
import { downloadFile } from '@/utils/index';
import { exportModelTemplate, importModelTemplate } from '@/api/system/template';
const emits = defineEmits(['handleEvent']);
const active = ref(1);
const mappingRef = ref(null);
const loading = ref(false);
const chooseTemplateRef = ref(null);
// 上传文件相关信息
const formInfo = ref({});
const fileList = ref([]);
const uploadFile = ref(null);
const chooseFileRef = ref(null);
const submitFile = ref(null);
const loadSuccessDataCount = ref(0);
const handleEvent = (data) => {
  // if (data?.type === 'fileData') {
  //   const { tableHeaderMap, sheetsDataMap, uploadFile } = data?.data;
  //   tableHeaderMap.value = tableHeaderMap;
  //   sheetsDataMap.value = sheetsDataMap;
  //   uploadFile.value = uploadFile;
  //   mappingFlag.value=true;
  //   nextTick(() => {
  //     mappingFlag.value=false;
  //   })
  // }
};
const handleRemove = (file) => {
  submitFile.value = null;
  fileList.value = [];
};
const handleChange = (file,list) => {
  fileList.value = [];
  fileList.value.push(file);
  const fileType = file.name.split('.');
  const length = fileType.length;
  console.log(fileList.value);
  console.log(list)
  if (!(fileType[length-1] === 'xlsx' || fileType[length-1] === 'xls')) {
    ElMessage({ showClose: true, message: '文件类型错误,请上传xls/xlsx文件', type: 'error' });
    return;
  }
  submitFile.value = file.raw;
};
const step = async (type) => {
  if (type === 'next') {
    if (active.value == 1) {
      if (!chooseTemplateRef.value.templateId) {
        ElMessage({ showClose: true, message: '请先选择数据模板！', type: 'warning' });
        return;
      }
      active.value++; 
    } else if (active.value == 2) {
      if (!submitFile.value) {
        ElMessage({ showClose: true, message: '请选择文件上传！', type: 'warning' });
        return;
      }
      submitAdd();
    }
    
  } else {
    // if (active.value == 3) {
    //   isBack.value = true;
    // } else if (active.value == 2) {
    //   // 切换上一步,重置是否改变业务场景和要素库类型标识为false
    //   chooseFileRef.value.isSceneOrDatabaseChange = false;
    //   mappingData.value = mappingRef.value.mappingList;
    // }
    active.value--;
  }
};
// 数据模板导出
const exportTemplate = () => {
  if (!chooseTemplateRef.value.templateId) {
    ElMessage({ showClose: true, message: '请先选择数据模板！', type: 'warning' });
    return;
  }
  exportModelTemplate(chooseTemplateRef.value.templateId).then((res) => {
    if (res?.code === 500) {
      ElMessage({ showClose: true, message: '下载失败。', type: 'error' });
      return;
    }
    downloadFile(res, `${chooseTemplateRef.value?.formData?.templateName}`, 'xlsx');
  });
}
// 数据导入
const submitAdd = () => {
  const fm = new FormData();
  fm.append('file', submitFile.value);
  fm.append('templateId', chooseTemplateRef.value.templateId);
  importModelTemplate(fm).then((res) => {
    if (res.code == 200) {
      ElMessage({ showClose: true, message: res.msg, type: 'success' });
      loadSuccessDataCount.value = res.data;
      active.value++; 
    } else {
      ElMessage({ showClose: true, message: res.msg, type: 'error' });
    }
  });
};
// 完成组建
const finish = () => {
  emits('handleEvent', { component: 'Entry', type: 'finish' });
  // 跳转元数据管理
};
// 取消
const cancel = () => {
  emits('handleEvent', { component: 'Entry', type: 'cancel' });
};

onMounted(() => {
  
});
</script>
<style lang="scss" scoped>
.excel-data-load {
  padding: 10px;
  width: 100%;
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: scroll;
  font-size: 12px;
  .steps {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:30px;
  }
  .upload {
    width: 600px;
    margin-top: 20px;
    .upload_content {
      width: 600px;
      text-align: center;
      .upload_form {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .upload_list,
  .upload_success {
    margin-top: 10px;
    overflow: scroll;
    // min-height: calc(100vh - 251px);
    width: 100%;
  }
  .upload_file {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .option_btn {
    margin-top: 20px;
  }
  .upload_success {
    margin-top: 10px;
    .upload_success_message {
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .finish {
    width: 600px;
    margin-top: 20px;
  }
  :deep(.el-step__title) {
    font-size: 12px;
  }
}
</style>
